﻿@import "../../styles/mixins/btn";
@import "../../styles/mixins/utils";
@import "../../styles/mixins/vars";

/**
 下拉框组件
 */
.select {
    position: relative;
    user-select: none;
    background-color: #fff;

    $border-color: #dfe8f1;
    $border: $border-color solid 1px;
    $tempborder: transparent solid 1px ;
    $item-height: 25;
    $result-height: $item-height*10;

    //选择区域
    .select-chosen {
        position: relative;
        border: $border;
        border-radius: rem(3);
        height: rem(38);
        width: 100%;
        .placehodler, .selected-item {
            @include line-height(38);
            padding-left: $d2;
        }
        .select-caret {
            @include middle-center-flex();
            position: absolute;
            right: 0;
            top: 0;
            width: rem(38);
            height: 100%;
            background-color: #eff4f6;
            border-bottom: $tempborder;
            border-left: $tempborder;
            &:after {
                transition: transform 200ms ease-in-out;
                content: ' ';
                @include triangle-bottom(8, 6, #2b2f33);
            }
        }

    }
    //下拉区域
    .select-drop {
        position: absolute;
        left: 0;
        border: $border;
        visibility: hidden;
        width: 100%;
        background-color: #fff;
        padding: $d2;
        z-index: 100;
        transform-origin: 0 0;
        .select-search {
            position: relative;
            color: #2b2f33;
            border: $border;
            width: 100%;
            box-shadow: inset 1px 1px 3px #f6f6f6;
            border-radius: 4px;
            padding-right: rem(30);
            height: rem(30);
            input {
                height: 100%;
                width: 100%;
                border: none;
                padding: 0 rem(5);
                outline: none;
            }
            .iconfont {
                position: absolute;
                width: rem(30);
                right: 0;
                text-align: center;
            }
        }

        .select-results {
            position: relative;
            max-height: rem($result-height);
            overflow-y: auto;
            margin-top: $d2;
            > li {
                @include line-height($item-height);
                padding-left: $d2;
                &:hover, &.hover, &.selected {
                    background-color: $primary;
                    color: #fff;
                    a {
                        color: #fff;
                    }
                }
                em {
                    font-style: normal;
                    font-weight: bold;
                    color: #333;
                }
            }
        }

    }

    //向上
    &.dropup {
        .select-drop {
            transform-origin: bottom;
            bottom: 100%;
            border-top-color: $border-color;
            //border-bottom-width: 0;
        }
    }

    //下拉展开
    &.expanded {
        .select-chosen {
            border-bottom-color: #fff;
        }
        .select-drop {
            margin-top: -1px;
            visibility: visible;
        }
        .select-caret {
            border-bottom-color: $border-color;
            border-left-color: $border-color;
            &:after {
                transform: rotate(-180deg);
            }
        }
    }

    //上拉展开
    &.dropup.expanded {
        .select-chosen {
            border-bottom-color: $border-color;
            border-top-color: #fff;
        }
        .select-drop {
            margin-top: 0;
            margin-bottom: -1px;
        }
    }
}